<template>
  <div>
    <u-cell-group :border="false">
      <required-parameter />
      <cus-cell
        title="是否显示边框"
        :border="false"
        v-if="
          editConfigCom.attribute &&
          editConfigCom.attribute.hasOwnProperty('border')
        "
      >
        <u-switch v-model="editConfigCom.attribute.border"></u-switch>
      </cus-cell>
      <cus-cell title="" :border="false">
        <div
          class="u-slot-upload"
          v-if="
            editConfigCom.attribute &&
            editConfigCom.attribute.hasOwnProperty('list')
          "
        >
          <draggable v-model="editConfigCom.attribute.list">
            <div
              v-for="(item, index) in editConfigCom.attribute.list"
              :key="index"
              class="cell__body"
            >
              <div class="upload-picker">
                <div class="upload-picker-navigateType">
                  <div class="upload-picker-navigateType-options">
                    <div style="margin-right: 10rpx">文字</div>
                    <u--input
                      placeholder="请输入单元格文字"
                      border="surround"
                      v-model="item.text"
                      maxlength="6"
                    ></u--input>
                  </div>
                  <div class="upload-picker-navigateType-options">
                    <div style="margin-right: 10rpx">链接</div>
                    <div>
                      <uni-data-select
                        v-if="item && item.hasOwnProperty('navigateType')"
                        v-model="item.navigateType"
                        :localdata="navigateTypeOptions"
                        :clear="false"
                        style="width: 6rem"
                      ></uni-data-select>
                    </div>
                  </div>
                </div>
              </div>
              <navigate-item-config :listIndex="index" />
              <u-icon
                name="close-circle"
                class="upload-picker-del"
                size="20"
                @click="onDeletePic(index)"
              ></u-icon>
            </div>
          </draggable>
          <!--          <div class="tips">最多添加10个单元格，长按拖拽可改变顺序</div>-->
          <u-button
            plain
            hairline
            type="primary"
            icon="plus"
            size="small"
            @click="handleAddAction"
            >添加单元格</u-button
          >
          <!--            <text class="">大小1m内支持使用png、jpg、gif格式</text>-->
        </div>
      </cus-cell>
    </u-cell-group>
  </div>
</template>

<script>
import requiredParameter from "@/components/cusFormConfig/requiredParameter";
import { NAVIGATE_TYPE } from "@/const/widget";
import {
  NAVIGATE_PARAMS,
  navigateTypeOptions,
} from "@/components/navigateConfig/config";
export default {
  components: { requiredParameter },
  computed: {
    pageData() {
      return this.$store.state.page.page;
    },
    editConfigComActiveId() {
      return this.$store.state.page.editConfigComActiveId;
    },
    activeIndex({ pageData, editConfigComActiveId }) {
      return pageData.items.findIndex((v) => v.id === editConfigComActiveId);
    },
    //组件本身属性
    editConfigCom({ pageData, activeIndex }) {
      return pageData.items[activeIndex];
    },
  },
  data() {
    return {
      NAVIGATE_TYPE,
      fileList: [],
      isSwiperCard: false,
      navigateTypeOptions,
    };
  },
  created() {},
  methods: {
    onDeletePic(e) {
      this.editConfigCom.attribute.list.splice(e, 1);
    },
    handleAddAction() {
      this.editConfigCom.attribute.list.push({
        text: "默认单元格",
        ...NAVIGATE_PARAMS,
      });
    },
  },
};
</script>

<style scoped lang="scss">
.cell__body {
  //display: flex;
  //flex-direction: row;
  box-sizing: border-box;
  padding: 10px 15px;
  font-size: 15px;
  color: #303133;
  align-items: center;
  background-color: #f9f9f9;
  border-radius: 8px;
  margin: 10px 0;
  position: relative;
}
.u-slot-upload {
  width: 100%;
  .upload-picker {
    margin-bottom: 10px;
    position: relative;
    display: flex;
    align-items: center;
    &-navigateType {
      margin: 0 10px;
      &-options {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
      }
    }
    &-img {
      position: relative;
      .upload-tips {
        position: absolute;
        background-color: rgba(0, 0, 0, 0.8);
        color: white;
        bottom: 0;
        width: 100%;
        text-align: center;
        font-size: 13px;
      }
    }
    &-del {
      position: absolute;
      top: -10px;
      right: -10px;
    }
    .u-button {
      width: 200px;
    }
  }
}
</style>
